<template>
  <div class="lcds-root-container">
    <div
      class="lc-form lc-form__adaptive-self lc-form__position-center"
      style="--formItemSpace: 50px; --label-width: 120px"
    >
      <el-form
        ref="formRef"
        :model="formModel"
        :rules="rules"
        :disabled="status === 'preview'"
        label-width="120px"
      >
        <lc-rower>
          <el-form-item class="lc-form-item" label="订单名称11111" prop="orderName">
            <div class="lc-form-item__box">
              <el-input class="lc-input" v-model="formModel.orderName" placeholder="请输入">
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="lc-form-item" label="订单编码22" prop="orderCode">
            <div class="lc-form-item__box">
              <el-input class="lc-input" v-model="formModel.orderCode" placeholder="请输入">
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="lc-form-item" label="编码" prop="id">
            <div class="lc-form-item__box">
              <el-input class="lc-input" v-model="formModel.id" placeholder="请输入"> </el-input>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item class="lc-form-item" label="订单明细表列表" prop="myOrderItemDtoList">
            <div class="lc-form-item__box">
              <lc-editor-table
                v-model="formModel.myOrderItemDtoList"
                ref="myOrderItemDtoListRef"
                :columns="myOrderItemDtoListColumns"
                input-width="120px"
                :rowOperates="['add', 'delete']"
                style="--form-input-width: 120px"
              >
                <template #input1="scope">
                  <el-input class="lc-input" v-model="scope.row.input1" placeholder="请输入">
                  </el-input>
                </template>

                <template #input2="scope">
                  <el-input class="lc-input" v-model="scope.row.input2" placeholder="请输入">
                  </el-input>
                </template>
              </lc-editor-table>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item class="lc-form-item" label="更新时间" prop="updateTime">
            <div class="lc-form-item__box">
              <el-date-picker
                class="lc-date-time-picker"
                v-model="formModel.updateTime"
                placeholder="请选择日期时间"
                type="datetime"
                format="YYYY-MM-DD HH:mm:ss"
                valueFormat="YYYY-MM-DD HH:mm:ss"
              >
              </el-date-picker>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item class="lc-form-item" label="更新人id" prop="updateBy">
            <div class="lc-form-item__box">
              <el-input-number
                class="lc-input-number"
                v-model="formModel.updateBy"
                :controls="true"
                placeholder="请输入"
              ></el-input-number>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item class="lc-form-item" label="创建时间" prop="createTime">
            <div class="lc-form-item__box">
              <el-date-picker
                class="lc-date-time-picker"
                v-model="formModel.createTime"
                placeholder="请选择日期时间"
                type="datetime"
                format="YYYY-MM-DD HH:mm:ss"
                valueFormat="YYYY-MM-DD HH:mm:ss"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item class="lc-form-item" label="订单商品数量" prop="orderGoodsCount">
            <div class="lc-form-item__box">
              <el-input-number
                class="lc-input-number"
                v-model="formModel.orderGoodsCount"
                :controls="true"
                placeholder="请输入"
              ></el-input-number>
            </div>
          </el-form-item>
          <el-form-item class="lc-form-item" label="订单金额" prop="orderAmount">
            <div class="lc-form-item__box">
              <lc-input-amount
                class="lc-input-amount"
                v-model="formModel.orderAmount"
                :maxDecimalDigits="2"
                :maxIntegerDigits="15"
                :clearable="false"
                placeholder="请输入"
              >
              </lc-input-amount>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item class="lc-form-item" label="是否安排用餐" prop="isMeals">
            <div class="lc-form-item__box">
              <el-select
                class="lc-select"
                v-model="formModel.isMeals"
                :clearable="true"
                placeholder="请选择"
              >
                <el-option
                  v-for="option in isMealsOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                >
                </el-option
              ></el-select>
            </div>
          </el-form-item>
          <el-form-item class="lc-form-item" label="编码" prop="id">
            <div class="lc-form-item__box">
              <el-input class="lc-input" v-model="formModel.id" placeholder="请输入"> </el-input>
            </div>
          </el-form-item>
          <el-form-item class="lc-form-item" label="是否安排用车" prop="isCar">
            <div class="lc-form-item__box">
              <el-select
                class="lc-select"
                v-model="formModel.isCar"
                :clearable="true"
                placeholder="请选择"
              >
                <el-option
                  v-for="option in isCarOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                >
                </el-option
              ></el-select>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item class="lc-form-item" label="住宿费（元/天）" prop="accommodationFee">
            <div class="lc-form-item__box">
              <lc-input-amount
                class="lc-input-amount"
                v-model="formModel.accommodationFee"
                :maxDecimalDigits="2"
                :maxIntegerDigits="15"
                :clearable="false"
                placeholder="请输入"
              >
              </lc-input-amount>
            </div>
          </el-form-item>
          <el-form-item class="lc-form-item" label="住宿费标准" prop="accommodationFeeStandard">
            <div class="lc-form-item__box">
              <lc-input-amount
                class="lc-input-amount"
                v-model="formModel.accommodationFeeStandard"
                :maxDecimalDigits="2"
                :maxIntegerDigits="15"
                :clearable="false"
                placeholder="请输入"
              >
              </lc-input-amount>
            </div>
          </el-form-item>
          <el-form-item class="lc-form-item" label="备注" prop="remark">
            <div class="lc-form-item__box">
              <span class="lc-label">
                {{ formModel.remark }}
              </span>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item class="lc-form-item" label="附件" prop="attachments">
            <div class="lc-form-item__box">
              <el-input class="lc-input" v-model="formModel.attachments" placeholder="请输入">
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="lc-form-item" label="申请细则" prop="applicationDetails">
            <div class="lc-form-item__box">
              <el-input
                class="lc-input"
                v-model="formModel.applicationDetails"
                placeholder="请输入"
              >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="lc-form-item" label="审批节点" prop="approvalNode">
            <div class="lc-form-item__box">
              <el-input class="lc-input" v-model="formModel.approvalNode" placeholder="请输入">
              </el-input>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item class="lc-form-item" label="专业室领导意见" prop="professionIdea">
            <div class="lc-form-item__box">
              <el-input class="lc-input" v-model="formModel.professionIdea" placeholder="请输入">
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="lc-form-item" label="院（中心、部门）负责人意见" prop="courtidea">
            <div class="lc-form-item__box">
              <el-input class="lc-input" v-model="formModel.courtidea" placeholder="请输入">
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="lc-form-item" label="总院主管总师意见" prop="mainIdea">
            <div class="lc-form-item__box">
              <el-input class="lc-input" v-model="formModel.mainIdea" placeholder="请输入">
              </el-input>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item class="lc-form-item" label="创建者" prop="createdBy">
            <div class="lc-form-item__box">
              <el-input class="lc-input" v-model="formModel.createdBy" placeholder="请输入">
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="lc-form-item" label="创建时间" prop="createdTime">
            <div class="lc-form-item__box">
              <el-date-picker
                class="lc-date-time-picker"
                v-model="formModel.createdTime"
                placeholder="请选择日期时间"
                type="datetime"
                format="YYYY-MM-DD HH:mm:ss"
                valueFormat="YYYY-MM-DD HH:mm:ss"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item class="lc-form-item" label="更新者" prop="updatedBy">
            <div class="lc-form-item__box">
              <el-input class="lc-input" v-model="formModel.updatedBy" placeholder="请输入">
              </el-input>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item class="lc-form-item" label="更新时间" prop="updatedTime">
            <div class="lc-form-item__box">
              <el-date-picker
                class="lc-date-time-picker"
                v-model="formModel.updatedTime"
                placeholder="请选择日期时间"
                type="datetime"
                format="YYYY-MM-DD HH:mm:ss"
                valueFormat="YYYY-MM-DD HH:mm:ss"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item class="lc-form-item" label="受邀/派遣" prop="invitationOrDispatch">
            <div class="lc-form-item__box">
              <el-input
                class="lc-input"
                v-model="formModel.invitationOrDispatch"
                placeholder="请输入"
              >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="lc-form-item" label="主办单位" prop="organizer">
            <div class="lc-form-item__box">
              <el-input class="lc-input" v-model="formModel.organizer" placeholder="请输入">
              </el-input>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item class="lc-form-item" label="任务" prop="task">
            <div class="lc-form-item__box">
              <span class="lc-label">
                {{ formModel.task }}
              </span>
            </div>
          </el-form-item>
          <el-form-item class="lc-form-item" label="被授权人联系方式" prop="authorizedContactInfo">
            <div class="lc-form-item__box">
              <el-input
                class="lc-input"
                v-model="formModel.authorizedContactInfo"
                placeholder="请输入"
              >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="lc-form-item" label="被授权人" prop="authorizedPerson">
            <div class="lc-form-item__box">
              <el-input class="lc-input" v-model="formModel.authorizedPerson" placeholder="请输入">
              </el-input>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item class="lc-form-item" label="出行方式" prop="travelMode">
            <div class="lc-form-item__box">
              <el-input class="lc-input" v-model="formModel.travelMode" placeholder="请输入">
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="lc-form-item" label="会议/注册费（元）" prop="registrationFee">
            <div class="lc-form-item__box">
              <lc-input-amount
                class="lc-input-amount"
                v-model="formModel.registrationFee"
                :maxDecimalDigits="2"
                :maxIntegerDigits="15"
                :clearable="false"
                placeholder="请输入"
              >
              </lc-input-amount>
            </div>
          </el-form-item>
          <el-form-item class="lc-form-item" label="外出地点" prop="placeOfDeparture">
            <div class="lc-form-item__box">
              <span class="lc-label">
                {{ formModel.placeOfDeparture }}
              </span>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item class="lc-form-item" label="结束时间" prop="endDate">
            <div class="lc-form-item__box">
              <el-date-picker
                class="lc-date-picker"
                v-model="formModel.endDate"
                placeholder="请选择日期"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item class="lc-form-item" label="开始时间" prop="startDate">
            <div class="lc-form-item__box">
              <el-date-picker
                class="lc-date-picker"
                v-model="formModel.startDate"
                placeholder="请选择日期"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item class="lc-form-item" label="出差人员最高职位" prop="topJob">
            <div class="lc-form-item__box">
              <el-input class="lc-input" v-model="formModel.topJob" placeholder="请输入">
              </el-input>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item class="lc-form-item" label="人数" prop="peopleNum">
            <div class="lc-form-item__box">
              <el-input-number
                class="lc-input-number"
                v-model="formModel.peopleNum"
                :controls="true"
                placeholder="请输入"
              ></el-input-number>
            </div>
          </el-form-item>
          <el-form-item
            class="lc-form-item"
            label="出差人所在院（中心、部门）室"
            prop="businessDepartment"
          >
            <div class="lc-form-item__box">
              <el-input
                class="lc-input"
                v-model="formModel.businessDepartment"
                placeholder="请输入"
              >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="lc-form-item" label="出差人" prop="businessTraveler">
            <div class="lc-form-item__box">
              <el-input class="lc-input" v-model="formModel.businessTraveler" placeholder="请输入">
              </el-input>
            </div>
          </el-form-item>
        </lc-rower>
        <lc-rower>
          <el-form-item class="lc-form-item" label="所在院（中心、部门）" prop="department">
            <div class="lc-form-item__box">
              <el-input class="lc-input" v-model="formModel.department" placeholder="请输入">
              </el-input>
            </div>
          </el-form-item>
          <el-form-item class="lc-form-item" label="申请人" prop="applyId">
            <div class="lc-form-item__box">
              <el-input class="lc-input" v-model="formModel.applyId" placeholder="请输入">
              </el-input>
            </div>
          </el-form-item>
        </lc-rower>
        <div
          v-if="btnGroupVisible"
          class="lc-buttonGroup lc-buttonGroup__level lc-buttonGroup__center"
          style="justify-content: center"
        >
          <el-button class="lc-button" style="--color: #b16161" @click="resetFormRef">
            取消
          </el-button>
          <el-button
            class="lc-button"
            type="primary"
            style="--color: #b16161"
            @click="submitFormRef"
          >
            保存
          </el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { onBeforeMount, ref } from 'vue';

import { request } from '@/apis/request';
defineOptions({
  name: 'FormModelTest'
});

const emit = defineEmits(['submit']);

const props = defineProps({
  btnGroupVisible: { type: Boolean, default: true },
  status: { type: String, default: '' },
  id: { type: String, default: '' }
});

const formModel = ref({
  orderName: '',
  orderCode: '',
  id: '',
  myOrderItemDtoList: [],
  updateTime: '',
  updateBy: '',
  createTime: '',
  orderGoodsCount: '',
  orderAmount: '',
  isMeals: '',
  isCar: '',
  accommodationFee: '',
  accommodationFeeStandard: '',
  remark: '',
  attachments: '',
  applicationDetails: '',
  approvalNode: '',
  professionIdea: '',
  courtidea: '',
  mainIdea: '',
  createdBy: '',
  createdTime: '',
  updatedBy: '',
  updatedTime: '',
  invitationOrDispatch: '',
  organizer: '',
  task: '',
  authorizedContactInfo: '',
  authorizedPerson: '',
  travelMode: '',
  registrationFee: '',
  placeOfDeparture: '',
  endDate: '',
  startDate: '',
  topJob: '',
  peopleNum: '',
  businessDepartment: '',
  businessTraveler: '',
  department: '',
  applyId: ''
});
const myOrderItemDtoListColumns = ref([
  { prop: 'input1', label: '输入列1', required: false, summary: false },
  { prop: 'input2', label: '输入列2', required: false, summary: false }
]);
const myOrderItemDtoListData = ref([]);
const myOrderItemDtoListRef = ref(null);
const isMealsOptions = ref([]);
const isCarOptions = ref([]);
const formRef = ref(null);
const loading = ref(false);
const rules = ref({});
const searches = new URLSearchParams(document.location.search.substring(1));
const formStatus = props.status || searches.get('status') || 'add';

const resetFormRef = () => {
  unref(formRef).resetFields();
};
const submitFormRef = async () => {
  const validated = await unref(formRef).validate();
  if (validated) {
    let params;
    if (formRefStatus === 'add') {
      params = { url: '', method: 'get', data: { ...formModel.value } };
    } else if (formRefStatus === 'edit') {
      params = { url: '', method: 'get', data: { ...formModel.value } };
    }
    loading.value = true;
    const res = request(params)
      .then((res = {}) => {
        if (res.success) {
          ElMessage({
            message: '操作成功',
            type: 'success'
          });
          emit('submit', 'success');
          return 'success';
        } else {
          ElMessage({
            message: res.message,
            type: 'error'
          });
          emit('submit', 'failed');
          return 'failed';
        }
      })
      .finally(() => {
        loading.value = false;
      });
    return res;
  }
};
const queryFormData = (queryData = {}) => {
  let params = { url: '', method: '' };
  loading.value = true;
  return request({
    ...params,
    params: {
      ...queryData
    }
  })
    .then((res = {}) => {
      const data = res.data || {};
      Object.keys(data).forEach((key) => {
        formModel.value[key] = [null, undefined].includes(data[key])
          ? formModel.value[key]
          : data[key];
      });
    })
    .finally(() => {
      loading.value = false;
    });
};

onBeforeMount(() => {
  if (['edit', 'preview'].includes(formStatus)) {
    const primaryKeyVal = props.id || searches.get('id ');
    formModel.value.id = primaryKeyVal;
    queryFormData({
      id: primaryKeyVal
    });
  }
});
</script>
